/*
 * @Author: xiaosihan 
 * @Date: 2024-09-17 12:31:52 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-23 00:27:46
 */


import partsApi from "@api/partsApi";
import hashHistory from "@hashHistory";
import { PartAttachment, PartData } from "@type";
import { Button, Image, Table, Tag, Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import icon1PNG from "./icon1.png";
import icon2PNG from "./icon2.png";
import icon3PNG from "./icon3.png";
import icon4PNG from "./icon4.png";
import styles from "./projectPartsLibrary.module.less";
import projectPartsLibraryStore from "./projectPartsLibraryStore";
import projectDatailStore from "../projectDatailStore";
import userStore from "@views/userStore";
import utils from "@utils";
import fileLookModalStore from "@views/pc/component/FileLookModal/fileLookModalStore";
import partCollaborateStore from "@views/pc/PartCollaborate/partCollaborateStore";


interface Iprops {
    projectId: string,
    children?: ReactNode
}
// 项目文件
export default function ProjectPartsLibrary(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [page, setPage] = useState(projectPartsLibraryStore.page);
    const [pageSize, setPageSize] = useState(projectPartsLibraryStore.pageSize);
    const [loading, setLoading] = useState(projectPartsLibraryStore.loading);
    const [partList, setPartList] = useState(projectPartsLibraryStore.partList);
    const [totalCount, setTotalCount] = useState(projectPartsLibraryStore.totalCount);
    const [isSelft, setIsself] = useState(projectDatailStore.userId === userStore.userId);
    const [id, setId] = useState(projectDatailStore.id);
    const [name, setName] = useState(projectDatailStore.name);

    useEffect(() => {
        projectPartsLibraryStore.getPartList(props.projectId);
    }, [props]);

    useEffect(() => autorun(() => {
        setPage(projectPartsLibraryStore.page);
        setPageSize(projectPartsLibraryStore.pageSize);
        setLoading(projectPartsLibraryStore.loading);
        setPartList(projectPartsLibraryStore.partList);
        setTotalCount(projectPartsLibraryStore.totalCount);
        setIsself(projectDatailStore.userId === userStore.userId);
        setId(projectDatailStore.id);
        setName(projectDatailStore.name);
    }, { delay: 10 }), []);

    const dataSource: Array<any> = partList.map(p => {
        return {
            key: p.id,
            ...p
        }
    });

    const columns = [
        {
            title: '名称',
            align: "left",
            dataIndex: 'id',
            key: 'id',
            render(id: string, p: PartData) {
                return (
                    <div className={styles.part_info} >
                        <Image.PreviewGroup>
                            <Image width={36} src={p.thumbnailUrl} />
                        </Image.PreviewGroup>
                        <p className={styles.part_id} >{p.name}</p>
                        <p className={styles.part_size} >{p.size}</p>
                    </div>
                );
            }
        },
        {
            title: '附件',
            align: "center",
            dataIndex: 'name',
            key: 'name',
            render(d: string, p: PartData) {
                return <div className={styles.names} >
                    {
                        p.attachments.map((a, i) => {
                            if (["png", "jpg", "jpeg", "webp"].includes(utils.getSuffix(a.name))) {
                                return (
                                    <Tag
                                        key={i}
                                        color="green"
                                        className={styles.cursor_pointer}
                                        onClick={() => {
                                            fileLookModalStore.setPath(a.url);
                                        }}
                                    >{a.name}</Tag>
                                )
                            } else {
                                return (
                                    <Tag key={i} >{a.name}</Tag>
                                )
                            }
                        })
                    }
                </div>;
            }
        },
        {
            title: <span style={{ whiteSpace: "pre" }} >最后修改时间</span>,
            align: "center",
            dataIndex: 'updateTime',
            key: 'updateTime',
            render(updateTime: string) {
                return <span style={{ display: "inline-block", minWidth: 80 }} >
                    {updateTime || "--"}
                </span>
            }
        },
        {
            title: <span style={{ whiteSpace: "pre" }} >版本最后上传者</span>,
            align: "center",
            dataIndex: 'statu',
            key: 'operate',
            render(statu: string, p: PartData) {
                return (
                    <div className={styles.operate} >
                        <span>{p.userName}</span>
                        <Tooltip
                            placement="top"
                            title="上传附件"
                            mouseEnterDelay={0}
                            mouseLeaveDelay={0}
                        >
                            <img className={styles.icon} src={icon1PNG} alt="" />
                        </Tooltip>

                        <Tooltip
                            placement="top"
                            title="查看详情"
                            mouseEnterDelay={0}
                            mouseLeaveDelay={0}
                        >
                            <img
                                className={styles.icon}
                                onClick={() => hashHistory.push(`/partsDetails/${p.id}`)}
                                src={icon2PNG} alt="" />
                        </Tooltip>

                        {isSelft &&
                            <Tooltip
                                rootClassName={styles.delete_tip}
                                placement="top"
                                mouseEnterDelay={0}
                                trigger={["click"]}
                                title={
                                    <Button
                                        danger
                                        type="primary"
                                        size="small"
                                        onClick={async () => {
                                            await partsApi.delete(p.id);
                                            projectPartsLibraryStore.getPartList(props.projectId);
                                        }}
                                    >确认删除</Button>
                                }
                            >
                                <img className={clsx(styles.icon, styles.delete)} src={icon4PNG} alt="" />
                            </Tooltip>
                        }

                        <Tooltip
                            title="协作"
                            placement="top"
                            mouseEnterDelay={0}
                            mouseLeaveDelay={0}
                        >
                            <img
                                className={styles.icon}
                                onClick={() => {
                                    partCollaborateStore.setFormPath(`/projectDatail/${id}`, `项目管理/${name}`);
                                    hashHistory.push(`/partCollaborate/${p.id}`);
                                }}
                                src={icon3PNG}
                                alt="" />
                        </Tooltip>


                    </div>
                );
            }
        },
    ];


    return (
        <div
            ref={dom}
            className={styles.projectPartsLibrary}
        >
            <Table
                size="small"
                loading={loading}
                dataSource={dataSource}
                columns={columns as any}
                className={styles.table}
                pagination={{
                    current: page,
                    total: totalCount,
                    pageSize: pageSize,
                    onChange: (page: number, pageSize: number) => {
                        projectPartsLibraryStore.setPage(page);
                    }
                }}
            />
        </div>
    );

}